<template>
  <div class="content">
    <ul class="btns">
      <li class="btn">
        <button v-has-show.aaa="'show:create'">创建</button>
      </li>

      <li class="btn">
        <button v-has-show.aaa="'show:edit'">编辑</button>
      </li>

      <li class="btn">
        <button v-has-show.aaa="'show:delete'">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {ref, Directive, DirectiveBinding} from "vue"
// permission
localStorage.setItem("userId", "han-li")

// mock后台返回的数据
const permission = [
  "han-li:show:create",
  "han-li:show:edit",
  "han-li:show:delete"
]

const userId = localStorage.getItem("userId")

const vHasShow:Directive<HTMLElement, string> = (el, binding) => {
  // console.log(el, binding)
  if(!permission.includes(userId + ":" + binding.value)) {
    el.style.display = "none"
  }
}

</script>

<style lang="less" scoped>
.btns {
  display: flex;
}

.btn {
  display: inline-block;
  padding: 10px 24px;
  margin: 10px 0;
  background-color: #fff;
}
</style>